<template>
	<view>
		<view class="name">{{details.name}}</view>
		<image :src="details.img" mode=""></image>
		你当前距离{{details.name}}有{{dis}}km
        <button style="width: fit-content;" @tap="setLine">到{{details.name}}去</button>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"
	import {
		getMapDistance
	} from "/utils/tools.js"
	import {
		userStore
	} from "../../store/userStore.js"
	const store = userStore()


	onLoad((data) => {

		console.log(data.id)
		getDetails((data.id))
	})


	let details = ref({})
	let dis = ref()
	async function getDetails(id) {
		let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/SecicItem/" + id)
		console.log(res)
		if (res.statusCode == 200) {
			details.value = res.data

			console.log(store.currentPos)

			console.log(details.value.lon, details.value.lat)
			dis.value = getMapDistance(details.value.lat, details.value.lon, store.currentPos.latitude, store
				.currentPos.longitude)

		}
	}
	
	function setLine()
	{
		uni.navigateTo({
			url:`/pages/playWebView/playWebView?slat=${store.currentPos.latitude}&slon=${store
				.currentPos.longitude}&elat=${details.value.lat}&elon=${details.value.lon}&name=${details.value.name}`
		})
	}
</script>


<style>

</style>